<template>
  <view class="teamDetails">
    <view class="teamDetails-nav">
      <u-tabs
        active-color="#000000"
        inactive-color="#999999"
        bar-height="2"
        bar-width="60"
        height="40"
        :list="list"
        :current="current"
        item-width="375"
        @change="tabChange"
      >
      </u-tabs>
    </view>
    <view class="teamDetails-bd">
      <template v-if="content.length > 0">
        <template v-for="item in content">
          <view class="teamDetails-bd-item" :key="item.id">
            <view class="name">
              <image class="avatar" :src="item.headavatar" mode="aspectFill">
              </image>
              <view class="text">{{ item.name }} </view>
            </view>
            <view class="time"> {{ item.name_time }} </view>
          </view>
        </template>
      </template>
      <template v-else>
        <view class="teamDetails-bd-tips"> 当前团队暂无成员！ </view>
      </template>
    </view>
  </view>
</template>

<script>
import { teamDetails } from "@/utils/api";
export default {
  data() {
    return {
      state: "",
      list: [
        {
          name: "我的",
        },
        {
          name: "团队",
        },
      ],
      current: 0,
      team: [],
      mine: [],
      content: [],
    };
  },
  onLoad({ state }) {
    this.state = state;
    this.initInfo();
  },
  onReady() {
    let obj = {
      today: "今日",
      week: "本周",
      month: "本月",
      last_month: "上月",
    };
    uni.setNavigationBarTitle({
      title: obj[this.state] + "团队",
    });
  },
  methods: {
    initInfo() {
      teamDetails({
        state: this.state,
      }).then((resp) => {
        console.log("团队详情", resp);
        if (resp.code == 200) {
          // const { team_today, ts_today } = resp;
          this.team = resp.data["team_" + this.state];
          this.mine = resp.data["ts_" + this.state];
          this.content = this.current ? this.team : this.mine;
        }
      });
    },
    tabChange(index) {
      this.current = index;
      this.content = this.current ? this.team : this.mine;
    },
  },
};
</script>
<style>
page {
  background-color: #f7f7f7;
}
</style>
<style lang="scss">
.teamDetails {
  width: 100%;
  &-bd {
    width: 100%;
    box-sizing: border-box;
    padding: 20rpx;
    &-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #ffffff;
      padding: 10rpx;
      margin-bottom: 15rpx;
      border-radius: 12rpx;
      font-size: 32rpx;
      .name {
        display: flex;
        align-items: center;
        width: calc(100% - 320rpx);
        .avatar {
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          // margin-right: 20rpx;
        }
        .text {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 100%;
          box-sizing: border-box;
          padding-left: 20rpx;
        }
      }
      .name {
        min-width: 320rpx;
      }
    }
    &-tips {
      width: 100%;
      text-align: center;
      padding: 20rpx 0;
    }
  }
}
</style>
